<template>
  <div>
    <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div style="border: 1px">
      <van-swipe-cell>
        <van-card 
          :desc='shops.descrip'
          :title="shops.name"
          class="goods-card"
          :thumb="shops.pic"
        />
      </van-swipe-cell>
    </div>

    <van-tree-select
      height="110vw"
      :items="items"
      
      @click-nav="change"
    >
      <template #content>
        <van-card
          num="1"
          price="2.00"
          :desc="i.description"
          :title="i.text"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          v-for="(i, index) in list1"
          :key="index"
        >
          <template #tags>
            <van-tag type="danger">销量500</van-tag>
          </template>
          <template #footer>
            <van-button size="mini">购买</van-button>
          </template>
        </van-card>
      </template>
    </van-tree-select>

    <footers></footers>
  </div>
</template>

<script>
import footers from "@/components/footers";
export default {
  components: {
    footers: footers,
  },
  data() {
    return {
      shops:[], // 商家信息
      items: [],  // 所有分类
      list1: [],  // 所属分类的菜品
    };
  },
  mounted(){
    this.axios.get('/index/getshops')
    .then((resp) => {
      this.shops = resp.data.shops
    }).catch((err) => {
      console.log(err)
    });
  },
  methods: {
    onClickLeft() {
      Toast("返回");
    },
    onClickRight() {
      Toast("按钮");
    },
    change(index) {
      alert(this.items[index]['id']);
    },
    getcateslist(){
      this.axios.get("/index/getcates")
      .then((resp) => {
        this.items = resp.data.catelist
      }).catch((err) => {
        console.log(err)
      });
    }
  },
  getgoods(cateid){
    this.axios.get('getGoodsBycateid?cateid='+cateid)
    .then((resp) => {
      this.list1 = resp.data.goodslist
      console.log(resp)
    }).catch((err) => {
      console.log(err)
    });
  },
  created(){
    this.getcateslist()
  }
};
</script>

<style>
.van-nav-bar__content {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 60px;
}

.goods-card {
  margin: 0;
  background-color: aliceblue;
}

.delete-button {
  height: 100%;
}
</style>